<template>
    <div class="cart-item-warpper clearfix">
        <div class="item-wrapper">
            <div class="item-image">
                <router-link :to="'/product/view/'+jumpUrl(items.product_name)" :title="items.product_name">
                    <img :src="items.image_path" :alt="items.product_name">
                </router-link>
            </div>
            <div class="item">
                <router-link :to="'/product/view/'+jumpUrl(items.product_name)" :title="items.product_name">
                    <span class="item-title" v-text="items.product_name"></span>
                </router-link>
                <p v-text="'SKU: '+items.product_sku"></p>
            </div>
        </div>
        <div class="price-qty-total-warpper">
            <div class="item-price">
                <span class="cart-price">{{items.price | Currency}}</span>
                <div class="mobile-price visible-xs visible-sm">Unit Price</div>
            </div>
            <div class="item-qty clearfix">
                <div class="item-qty-select">
                    <div v-if="showRemove" class="select-container">
                        <select v-model="items.product_qty">
                            <option v-for="(qty,index) in (items.product_stock > 10 ? 10 : items.product_stock)" :key="index" :value="qty" v-text="qty"></option>
                        </select>
                        <span class="icon-menu-dowm"></span>
                    </div>
                    <div v-else class="item-qty1" v-text="items.product_qty">

                    </div>
                </div>
                <div class="mobile-qty visible-xs visible-sm">Quantity</div>
            </div>
            <div class="item-total">
                <span class="cart-price">{{total | Currency}}</span>
                <div class="mobile-subtotal visible-xs visible-sm">Subtotal</div>
            </div>
            <div v-if="showRemove" class="item-remove">
                <a href="javascript:;" @click="remove">
                    <span class="icon-remove"></span>
                </a>
            </div>
        </div>
    </div>
</template>
<script>
import mixin from '../../mixin'
export default {
    mixins: [mixin],
    props: {
        items: {},
        showRemove: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        // 单个商品小计
        total() {
            return (this.items.price * this.items.product_qty)
        }
    },
    methods: {
        remove() {
            this.$emit('remove')
        }
    }
}
</script>